<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose, watch} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  scatterData: {
    type: Array,
    default: () => {
      seriesData: []
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const symbolSizeFunc = (x) => {
  let y = Math.sqrt(x / 5e8) + 0.1;
  return pxToRem(y * 400) * props?.dialogData?.fontSizeTimes;
};

const initScatterData = (option) => { // 初始化图标数据
  for (let n = 0; n < props?.scatterData.timelineList.length; n++) {
    option.baseOption.timeline.data.push(props?.scatterData.timelineList[n]);
    option.options.push({
      series: {
        name: props?.scatterData.timelineList[n],
        type: 'scatter',
        itemStyle: {
          opacity: 0.8
        },
        data: props?.scatterData.series[n],
        symbolSize: (val) => {
          return symbolSizeFunc(val[2]);
        }
      }
    });
  }
}

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    const tempFlatList = props?.scatterData?.series.flat()
    const tempHandleMaxList = tempFlatList.map(x => x[2])
    const visualMapMaxNum = Math.max(...tempHandleMaxList)
    let option = {
      baseOption: {
        timeline: {
          axisType: 'category',
          orient: 'vertical',
          autoPlay: true,
          inverse: true,
          playInterval: 1000,
          left: null,
          right: 0,
          top: pxToRem(20),
          bottom: pxToRem(20 * props?.dialogData?.fontSizeTimes),
          width: pxToRem(55 * props?.dialogData?.fontSizeTimes),
          height: null,
          symbol: 'none',
          checkpointStyle: {
            borderWidth: 2
          },
          controlStyle: {
            showNextBtn: false,
            showPrevBtn: false
          },
          label: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
          },
          progress: {
            label: {
              fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
            },
          },
          data: []
        },
        grid: {
          left: '1%',
          right: '10%',
          bottom: '5%',
          top: '25%',
          containLabel: true
        },
        xAxis: {
          name: '库存',
          max: 30000,
          axisLabel: {
            fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
            color: 'white',
          },
          nameTextStyle: {
            color: "white",
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          name: '均价(元)',
          nameTextStyle: {
            color: "white",
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            padding: [0, 0, 0, pxToRem(20 * props?.dialogData?.fontSizeTimes)]
          },
          textStyle: {
            fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes)
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
            color: 'white',
            fontWeight: 'lighter'
          }
        },
        tooltip: {
          backgroundColor: 'rgba(255,255,255,1)',
          formatter: (params) => {
            let value = params.value;
            let tempClass = value[6] > 0 ? 'triangle-reverse' : ''
            let percentage = Math.abs(value[3])
            let color = value[6] > 0 ? '#4DAC56' : '#EF8169'
            return '均价：' + value[1] + '万元<br>'
                + '平均去化周期：' + value[3] + '<br>'
                + '库存：' + value[0] + '套<br>'
                + '销量：' + value[2] + '套<br>'
                + `<div style="display: inline-flex; align-items: center">` + `<div class="triangle ${tempClass}"></div>` + `<span style="color: ${color}">${percentage}%</span>`  + '&nbsp;同比上年' + '</div>'
          }
        },
        visualMap: {
          min: 0,
          max: visualMapMaxNum,
          dimension: 2,
          top: '0',
          left: props?.dialogData?.fontSizeTimes === 1 ? '10%' : '12.5%',
          orient: 'horizontal',
          calculable: true,
          itemWidth: pxToRem(15 * props?.dialogData?.fontSizeTimes),
          itemHeight: pxToRem(100 * props?.dialogData?.fontSizeTimes),
          textStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          },
          inRange: {
            color: ['#08AAFF', '#BD3010'],
          }
        },
        graphic: {
          type: 'text',
          x: pxToRem(125 * props?.dialogData?.fontSizeTimes),
          y: pxToRem(30 * props?.dialogData?.fontSizeTimes),
          style: {
            text: '新房去化周期',
            textAlign: 'center',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            fill: 'white'
          }
        },
        series: [
          {
            type: 'scatter',
            symbolSize: (data) => {
              return (Math.sqrt(data[2]) / 5e2) * props?.dialogData?.fontSizeTimes;
            },
            label: {
              show: true,
              fontSize: pxToRem(10 * props?.dialogData?.fontSizeTimes),
              position: 'inside',
              color: '#fff',
              formatter(params) {
                return params.data[4]
              }
            },
            data: props?.scatterData?.seriesData,
          }
        ]
      },
      options: []
    }
    initScatterData(option)
    option && myChart.value.setOption(option, true);
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h147 {
  height: 147px;
}
.dialog-h147 {
  width: 1120px;
  height: 500px;
}

:deep(.triangle) {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid #EF8169;
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
}

:deep(.triangle-reverse) {
  transform: rotate(180deg);
  border-top: 5px solid #4DAC56;
}
</style>